﻿@page "/components/badge"

<PageHeader Title="Badge 徽标">
    出现在图标或文字右上角的徽标标识。
</PageHeader>

<Example Title="示例">
    <Description></Description>
    <RunContent>
        <Badge Text="99">
            <Button Theme="Theme.Primary">按钮</Button>
        </Badge>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Badge Text=""99"">
    <Button Theme=""Theme.Primary"">按钮</Button>
</Badge>
```
")
    </CodeContent>
</Example>
<Example Title="不同形状">
    <Description></Description>
    <RunContent>
        <Space>
            <SpaceItem>
                <Badge Shape="BadgeShape.Dot">
                    <Button Theme="Theme.Primary">按钮</Button>
                </Badge>
            </SpaceItem>
            <SpaceItem>
                <Badge Shape="BadgeShape.Circle" Text="5">
                    <Button Theme="Theme.Primary">按钮</Button>
                </Badge>
            </SpaceItem>
            <SpaceItem>
                <Badge Shape="BadgeShape.Round" Text="90">
                    <Button Theme="Theme.Primary">按钮</Button>
                </Badge>
            </SpaceItem>
        </Space>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Badge Shape=""BadgeShape.Dot"">
    <Button Theme=""Theme.Primary"">按钮</Button>
</Badge>
<Badge Shape=""BadgeShape.Circle"" Text=""5"">
    <Button Theme=""Theme.Primary"">按钮</Button>
</Badge>
<Badge Shape=""BadgeShape.Round"" Text=""90"">
    <Button Theme=""Theme.Primary"">按钮</Button>
</Badge>
```
")
    </CodeContent>
</Example>
<Example Title="不同尺寸">
    <Description>提供标准（默认）、小两种尺寸。</Description>
    <RunContent>
        <Badge Text="new">
            <Button Theme="Theme.Primary">标准尺寸</Button>
        </Badge>
        <br />
        <br />
        <Badge Text="small" Small>
            <Button>小尺寸</Button>
        </Badge>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Badge Text=""new"">
    <Button Theme=""Theme.Primary"">标准尺寸</Button>
</Badge>

<Badge Text=""small"" Small>
    <Button>小尺寸</Button>
</Badge>
```
")
    </CodeContent>
</Example>
<Example Title="自定义颜色">
    <Description>可对显示信息进行自定义配置，如展示为“热门hot”“最新new”等。</Description>
    <RunContent>
        <Space Gap="30px">
            <SpaceItem>
                <Badge Text="hot">
                    这是一条头条新闻
                </Badge>
            </SpaceItem>
            <SpaceItem>
                <Badge Text="new" Color="green">
                    <Icon Name="IconName.User"/> 新用户
                </Badge>
            </SpaceItem>
            <SpaceItem>
                <Badge Text="99+" Color="purple">
                    <Button>按钮</Button>
                </Badge>
            </SpaceItem>
        </Space>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Badge Text=""hot"">
    这是一条头条新闻
</Badge>

<Badge Text=""new"" Color=""green"">
    <Icon Name=""IconName.User""/> 新用户
</Badge>

<Badge Text=""99+"" Color=""purple"">
    <Button>按钮</Button>
</Badge>
```
")
    </CodeContent>
</Example>
<Example Title="偏移量位置">
    <Description>
        使用 <code>Top</code> 和 <code>Right</code> 控制徽标的偏移量位置。
    </Description>
    <RunContent>
        <Space Gap="30px">
            <SpaceItem>
                <Badge Text="hot" Top="-5">
                    这是一条头条新闻
                </Badge>
            </SpaceItem>
            <SpaceItem>
                <Badge Text="new" Color="green" Top="-10" Right="50">
                    <Icon Name="IconName.User" /> 新用户
                </Badge>
            </SpaceItem>
            <SpaceItem>
                <Badge Text="99+" Color="purple" Top="15" Right="-10">
                    <Button>按钮</Button>
                </Badge>
            </SpaceItem>
        </Space>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Badge Text=""hot"" Top=""-5"">
    这是一条头条新闻
</Badge>

<Badge Text=""new"" Color=""green"" Top=""-10"" Right=""50"">
    <Icon Name=""IconName.User"" /> 新用户
</Badge>

<Badge Text=""99+"" Color=""purple"" Top=""15"" Right=""-10"">
    <Button>按钮</Button>
</Badge>
```
")
    </CodeContent>
</Example>